<template>
    <div>
        <div class="tab">
            <div class="tab-left">
              <div class="tab-left-top">
                  <h3>Tab标签</h3>
                  <el-input v-model="tab_name" @change="tab_name_change" placeholder="" style="width: 140px" maxlength="8"/>
              </div>
              <el-divider border-style="solid" />
              <div class="mode-select">
                <h3>模式:</h3>
                <el-select v-model="mode_value" class="select" placeholder="Select" @change="modeChange">
                  <el-option
                  v-for="item in mode_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  />
                </el-select>
              </div>
              <el-divider border-style="solid" />
              <div class="data-options">
                  <h3>接收设置</h3>
                  数据格式
                  <el-radio-group v-model="rec_format" class="rec-format">
                  <el-radio label="1" size="large" border>HEX</el-radio>
                  <el-radio label="2" size="large" border>ASCII</el-radio>
                  </el-radio-group>
                  <el-checkbox v-model="rec_stop" label="停止接收" size="large" />
                  <div class="rec-btns">
                    <el-button type="primary" size="small" round>清空接收区</el-button>
                    <el-button type="primary" size="small" round>保存到文件</el-button>
                  </div>
                  <el-divider border-style="solid" />
                  <h3>发送设置</h3>
                  数据格式
                  <el-radio-group v-model="send_format" class="send-format">
                  <el-radio label="1" size="large" border>HEX</el-radio>
                  <el-radio label="2" size="large" border>ASCII</el-radio>
                  </el-radio-group>
                  <div class="send-options">
                    发送选项:
                    <el-select v-model="send_mode_value" class="select" placeholder="Select" @change="sendModeChange">
                      <el-option
                      v-for="item in send_mode_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="send-auto">
                    <div class="send-auto-time">
                        自动发送周期:
                        <el-input v-model="send_auto_time" placeholder="" style="width: 70px" maxlength="4" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
                        ms
                    </div>
                    <el-checkbox v-model="send_auto" label="自动发送" size="large" board />
                  </div>
                  <el-divider border-style="solid" />
                  <div  class="modeComponent">
                    <component :is="currPortSettingPanel.panel" :index="index" :rec_data="rec_data" @rec_data_update="rec_data_get">
                    </component>
                  </div>
              </div>
            </div>
            <div class="tab-right">
                <div class="rec-panel">
                  <el-input
                  v-model="rec_data"
                  type="textarea"
                  resize="none"
                  placeholder="Please input"
                  :rows="24"
                  style="width: 600px"
                  />
                </div>
                <div class="send-panel">
                  <component :is="currSendPanel.panel">
                  </component>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { reactive, ref ,markRaw,inject,provide} from 'vue';
import TcpServerUI from '@/MainViews/TcpServerUI.vue';
import TcpClientUI from '@/MainViews/TcpClientUI.vue';
import SendOnceUI from '@/MainViews/SendOnceUI.vue';

const props = defineProps(['index'])  //这个外部改变值会导致子组件数值改变
let index = props.index
const tab_name = ref('new')
const mode_value = ref('TcpServer')
const send_mode_value = ref('单项发送')
const rec_format = ref('1')
const rec_stop = ref(false)
const rec_data = ref('')
const send_format = ref('1')
const send_auto=ref(false)
const send_auto_time=ref('1000')
let currPortSettingPanel = reactive({
    panel:markRaw(TcpServerUI)
})
let currSendPanel = reactive({
    panel:markRaw(SendOnceUI)
})
const mode_options = [     //模式选项
  {
    value: '0',
    label: 'TcpServer',
  },
  {
    value: '1',
    label: 'TcpClient',
  },
  {
    value: '2',
    label: 'UDP',
  },
  {
    value: '3',
    label: 'Serial',
  },
  {
    value: '4',
    label: 'HttpClient',
  },
  {
    value: '5',
    label: 'MqttClient',
  },
]
const send_mode_options = [     //模式选项
  {
    value: '0',
    label: '单项发送',
  },
  {
    value: '1',
    label: '多项发送',
  },
  {
    value: '2',
    label: '文件发送',
  },
]
let $emit = defineEmits(['tab_name_change'])
const tab_name_change= async (val)=>{
    $emit('tab_name_change',index,val)
}
const rec_data_get = async (message) =>{
    rec_data.value +=message
}
const modeChange = async (val) =>{   //模式改变切换右边对应的页面
    if(val == 0)
    {
      currPortSettingPanel.panel = markRaw(TcpServerUI)
    }else if(val == 1){
      currPortSettingPanel.panel = markRaw(TcpClientUI)
    }
}
const sendModeChange = async (val) =>{   //模式改变切换右边对应的页面
   
}
</script>

<style scoped>
*{
    user-select: none;
    margin: 0;
    padding: 0;
}

.tab{
    margin: 5px auto;
    padding: 0;
    width: 820px;
    height: 760px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tab-left-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.tab-left{
    width: 200px;
    height:760px ;
    border: 1.5px solid white;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.mode-select{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px 0 10px;
  display: flex;
  text-align: center;
}
.data-options{
  width: 100%;
  margin-bottom: 10px;
}
.rec-format{
  margin-top: 5px;
}
.rec-btns{
  display: flex;
  justify-content: center;
}
.send-options{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 0 2px 0 2px;
  margin-top: 5px;

}
.select{
  margin: 0 auto;
  width:120px;
}
.send-auto-time{
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.modeComponent{
  width: 100%;
}
.tab-right{
    width: 620px;
    height:760px;
    border: 1.5px solid white;
    border-radius: 25px;
}
.rec-panel{
    width: 620px;
    height:540px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.send-panel{
    width: 620px;
    height:220px;
}
</style>